<!doctype html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>404财富管家</title>
<meta name="keywords" content="财富管家" />
<meta name="description" content="财富管家" />
<link rel="shortcut icon" th:href="@{/images/littlelogo.png}">
<link rel="icon" th:href="@{/favicon.ico}" mce_href="/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
<link rel="stylesheet" th:href="@{/css/user.css}"/>
<link th:href="@{/css/iconfont/RjdaoIcon.css}" rel="stylesheet" type="text/css">
<link th:href="@{/css/bs.css}" rel="stylesheet">
<link th:href="@{/css/index.css}" rel="stylesheet">
<link th:href="@{/css/layui/css/layui.css}" rel="stylesheet">
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{/js/highcharts.js}"></script>
<script th:src="@{/js/layer/layer.js}" charset="utf-8"></script>
<!--
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="https://img.hcharts.cn/highcharts/themes/grid-light.js"></script>
-->
<style type="text/css">
	#transaction_table th{
		font-size: 20px;
		height: 30px;
		width: 150px;
		
	}
	
	#transaction #search select{
		font-size: 20px;
		
	}
	
	#transaction #search input {
		font-size: 18px;
		
	}
</style>
</head>

<body>

<!----header s---->
<div class="topnav">
	<div class="mainw w">
		<div class="l-txt">欢迎致电：400-1234-123 &nbsp;&nbsp; 服务时间：08:30-17:30（工作日）</div>

		<a th:href="@{/information/xinxi2}" class="dh">帮助中心</a>
		<a th:href="@{/information/xinxi3}" class="dh">新手指引</a>

	</div>
</div>
<header>
	<div class="hmain w">
		<a th:href="@{/index}" class="logo"><img th:src="@{/images/logo.png}"></a>
		<a th:href="@{/login}" class="ubut">退出</a>
		<a th:href="@{/userCenter/index}" class="ubut" style="padding:0 15px;background-color: #C9302C;color: white;">个人中心<span><dl th:text="${'我的资产:'+user.balance}">我的资产：2830.00</dl></span></a>
		<nav>
			<a th:href="@{/index}" >首页</a>
			<a th:href="@{/invest/list}">我要投资</a>
			<a th:href="@{/borrowCenter/index}">我要借贷</a>
			<a th:href="@{/zhongchou/list}">众筹中心</a>
			<a th:href="@{/information/xinxi1}">信息披露</a>
		</nav>
	</div>
</header>
<!----header e---->



<!---user top s---->
<div class="user-top">

	<div class="userinfo">

		<a href="" class="portrait" style="margin-top:10px;"><em>编辑头像</em><img th:src="@{/images/user-portrait.jpg}"></a>
		<div class="minfo" style="margin-top:30px;">
			<div class="it"><dl>ID：</dl><span class="mr1" th:text="${user.id + 10000}">633748</span> <dl>用户名：</dl><span th:text="${user.tell}">xiezhengyi</span></div>
			<div class="it">
				<dl>绑定手机号：</dl><span th:text="${user.tell}">187****6613</span>
				<a class="ml1" title="手机" th:href="@{/userCenter/safe}"><i class="icon-0566"></i></a>
				<a th:href="@{/userCenter/account}" class="ml1" title="设置"><i class="icon-0421"></i></a>
			</div>
		</div>

		<div class="capital">
			<dl>我的总资产</dl><em th:text="${user.balance}">200263.00</em>
		</div>
		<div class="capital2">
			<a href="javascript:void(0);" onclick="recharge()" class="ti">充值</a>
			<a href="javascript:void(1);" onclick="forward()" class="ti">提现</a>
		</div>

	</div>
    
    <div class="nav">
		<a th:href="@{/userCenter/index}" class="l"><i class="icon-0101" ></i><span >我的项目</span></a>
		<a th:href="@{/userCenter/loan}" class="l"><i class="icon-0101"></i><span>我的借贷</span></a>
		<a th:href="@{/userCenter/Crowd}" class="l"><i class="icon-0941"></i><span>我的众筹</span></a>
		<a th:href="@{/userCenter/transaction}" class="l"><i class="icon-0423"style="color: orange;"></i><span style="color: orange;">交易记录</span></a>
		<a th:href="@{/userCenter/account}" class="l"><i class="icon-0841"></i><span>账户设置</span></a>
		<a th:href="@{/userCenter/safe}" class="l"><i class="icon-0282"></i><span>安全设置</span></a>
		<a th:href="@{/login}" class="r"><i class="icon-0735"></i><span>退出</span></a>
    </div>
    
</div>

<!---user top e---->
<div class="u-main">
	<div id="transaction" style="margin-left: 20px;" >
		<div style="margin-left: 0px;" >
			<span style="font-size: 20px;">&nbsp;|&nbsp;已充值总额:</span><span style="font-size: 20px;" th:text="'￥'+${allrechange}">￥00.00</span>
			<span style="font-size: 20px;">&nbsp;|&nbsp;已体现总额:</span><span style="font-size: 20px;" th:text="'￥'+${allforward}">￥00.00</span>
		
		</div>
		<hr />

		<div id="search" style="margin-top: 20px;">
			<form th:action="@{/userCenter/transaction}" method="post">
				<select id="sel1" name="group" style="width: 300px;height: 40px;">
					<option value="">交易分类</option>
					<option value="0">充值</option>
					<option value="1">提现</option>
					<option value="2">投资项目</option>
					<option value="3">借贷项目</option>
					<option value="4">众筹项目</option>

				</select>
				<input type="date" th:value="${start}" name="start" id="start"/>
				<input type="date" th:value="${end}" name="end" id="end"/>
				<input type="submit" style="font-size:25px;width: 100px;" value="搜索" ></input>
<!--
				<input type="button" style="font-size:25px;width: 100px;" onclick="tran()">搜索</input>
-->
			</form>
		</div>
		<div id="vueContainer">
		<table class="layui-table" id="tab">
			<colgroup>
				<col width="300">
				<col width="150">
                <col width="150">
                <col width="150">
                <col width="150">
				<col>
			</colgroup>
			<thead>
			<tr>
				<th>交易时间</th>
				<th>交易类型</th>
				<th>存入</th>
				<th>支出</th>
				<th>余额</th>
				<th>备注</th>
			</tr>
			</thead>

			<tbody >
			<tr id="transactioninfo" th:each="tran:${transaction}">
				<td th:text="${#dates.format(tran.createtime, 'yyyy-MM-dd HH:mm:ss')}">许闲心</td>
				<!--<td th:text="${tran.type eq '0'}? '充值':${tran.type eq '1'}? '提现':${tran.type eq '2'}? '投资项目':${tran.type eq '3'}? '借贷项目':${tran.type eq '4'}? '众筹项目':''">2016-11-28</td>
                --><td th:text="(${tran.type}== 4) ? '众筹项目':((${tran.type}== 3)? '借贷项目':((${tran.type}== 2)? '投资项目':((${tran.type}== 1)? '提现':((${tran.type}== 0)? '充值':''))))">2016-11-28</td>
				<td th:text="${tran.balancein}">于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
				<td th:text="${tran.balanceout}">2016-11-28</td>
				<td th:text="${tran.balance}">2016-11-28</td>
				<td th:text="${tran.remarks}">2016-11-28</td>
			</tr>


			</tbody>

		</table>
	</div>
		<div id="pagination"></div>
	</div>
</div>

<script th:inline="javascript">
    var userId = [[${user.id}]];//用户id
    var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
    var count = [[${count}]];
    var curr = [[${curr}]];//当前页
	var group=[[${group}]]
	var start=[[${start}]]
	var end=[[${end}]]
</script>
<!--充值页面 s-->
<script type="text/javascript">
    function recharge() {
        //页面层
        layer.open({
            type: 2,
            title: '充值中心',
            skin: 'layui-layer-rim', //加上边框
            area: ['750px', '470px'], //宽高
            anim:4, //0-6的动画形式，-1不开启
            content: contextPath + '/userCenter/recharge?id=' + userId
        });
    }
</script>
<!--充值页面 e-->
<!--提现页面 s-->
<script type="text/javascript">
    function forward() {
        //页面层
        layer.open({
            type: 2,
            title: '提现中心',
            skin: 'layui-layer-rim', //加上边框
            area: ['750px', '340px'], //宽高
            anim:4, //0-6的动画形式，-1不开启
            content: contextPath + '/userCenter/forward?id=' + userId
        });
    }
</script>
<!--提现页面 e-->
<!--vue-->
<script type="text/javascript" th:src="@{/js/layui.js}"></script>
<script th:src="@{https://cdn.staticfile.org/vue/2.2.2/vue.min.js}"></script>
<script type="text/javascript">
    window.onload = function () {
    $("#sel1 option").each(function(){

        if($(this).val() == group){
            $(this).attr("selected",true);
        }
    });
    }
    /*//使用Vue渲染模板，初始化时是没有数据的，需要ajax请求拿到数据
    var vue = new Vue({
        el: "#vueContainer",
        data: {
            bussinessList: null
        }
    });

    var pageIndex = 1;  //默认第一页
    var pageSize = 2;   //每页显示记录数
    var totalCount = 0; //总记录数

    //默认第一次加载数据
    pagination(pageIndex, pageSize);

    //获取分页数据
    function pagination(pageIndex, pageSize) {
        //查询条件
        var param = {
            pageIndex: pageIndex,
            pageSize: pageSize,
            //其它查询条件可在下面添加
        };

        $.ajax({
            type: 'POST',
            url: contextPath + '/userCenter/getData',
            data: param,
            async: false,//一定设置同步，目的为对totalCount赋值
            success: function (data) {

                totalCount = data.count;
                vue.bussinessList=data.list;
                console.log(data.list);

            }
        });
    };
    console.log(vue.bussinessList.createtime)*/

    //使用layui分页
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'pagination' //注意，这里的 data 是 ID，不用加 # 号
            ,count: count  //数据总数，从服务端得到
            ,curr: curr
            // , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            ,limit: 2
            ,jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if(!first){
                    window.location.href = contextPath + "/userCenter/transaction?page=" + (obj.curr) + "&size=" + obj.limit+"&group="+group+"&start="+start+"&end="+end
                 //   pagination(obj.curr, obj.limit);//第二个参数不能用变量pageSize，因为当切换每页大小的时候会出问题
                }
            }
        });
    });

</script>
<!--vue e-->
<!--异步搜索 s-->
<!--<script type="text/javascript">

    function tran() {
        var find = document.getElementById("find1").value;
        var start= document.getElementById("findstart").value;
        var end= document.getElementById("findend").value;
        $.ajax({
            type : "post",
            url : contextPath+"/userCenter/transactioninfo?group="+find+"&start="+start+"&end="+end,
            async : true,
            data:{},
            dataType:"JSON",
            success : function(data){
                /*console.log(data);
                $("#transactioninfo").html(data);*/
                //$("#userbalance").html(data['balance']+'.0');

                var table = jQuery("#tab");//获取需要显示数据的table
				// 清空table
                var rowNum=table.rows.length;
                for (i=0;i<rowNum;i++)
                {
                    table.deleteRow(i);
                    rowNum=rowNum-1;
                    i=i-1;
                }
                //遍历data数据      i:索引，j:索引值
                jQuery.each(data,function(i,j){


                    //往table添加tr
                    table.append(
                        "<tr>"+
                        "<td>"+j.createtime+"</td>"+
						"<td>"+j.type+"</td>"+
						"<td>"+j.balancein+"</td>"+
						"<td>"+j.balanceout+"</td>"+
						"<td>"+j.balance+"</td>"+
						"<td>"+j.remarks+"</td>"+
						"<tr/>");
                });
            }

        })
    }
</script>-->
<!--异步搜索 e-->


<!---footer s--->
<footer>
	<div class="fmain w">
    	<div class="fm-top">
        	<div class="left">
            
            	<div class="ilist">
                	<h1>联系我们</h1>
                    <div class="t">客服电话</div>
                    <div class="tel">400-1234-123</div>
                    <div class="t">邮箱：quanminsat@163.com</div>
                </div>

				<div class="ilist">
					<h1>关于我们</h1>
					<a th:href="@{/information/jianjie}">公司简介</a>
					<a th:href="@{/information/gonggao}">最新公告</a>
					<a th:href="@{/information/join_us}">加入我们</a>
				</div>
            </div>
            <div class="right">
            	<div class="ewm" style="margin-left:20px;"><img th:src="@{/images/gzh.jpg}"><span>关注公众号</span></div>
            </div>
        </div>
          <div class="fm-bot" style="text-align: center;">
        	<span>&copy; 2018 &nbsp;全民科技有限公司 &nbsp;京ICP备：123456789号 </span>
        	<br />
            <dl>市场有风险 投资需谨慎</dl>
        </div>
    </div>
</footer>
<!---footer e--->


</body>
</html>
